<template>
  <div style="margin: 0 auto;width: 1200px;">
    <h1 style="text-align: center;">{{title}}</h1>
    <el-countdown
        style="float: right;margin-right: 10px"
        title="---参考时间---"
        format="HH:mm:ss"
        :value-style="value_style"
        @finish="timeEnd"
        :value="time_value"
    />
    <WordQuiz :wordParams="route.query" @finish="testResult"/>
  </div>
</template>

<script setup>
import WordQuiz from '@/components/word/WordQuiz'
import {getCurrentInstance, ref} from 'vue'
import {getPageUnitTimes} from "@/api/word/index.js";
const route = useRoute()
const title = ref('')
const value_style = ref('color: red;background-color: yellow;')
const {proxy} = getCurrentInstance();
const {word_test_scope} = proxy.useDict("word_test_scope")
let time_value = ref(Date.now() + 1000 * 60 * 6)
const testWord = ref({})
const testCount = ref(0)

onMounted(() => {
  title.value = ("高中-" +  route.query.book + "-" + route.query.unit + "-单词或词组").toUpperCase() + initTitleData()
})

//初始化数据
function initTitleData(){
  // console.log(word_test_scope)
  let value = word_test_scope.value;
  let find = value.find(item => item.value === route.query.times );
  if(find === undefined) {
    return "测试"
  }
  return find.label
}

//加载数据
async function handleQueryTimes() {
  // console.log(queryParam.value)
  await getPageUnitTimes(route.query).then((res) => {
    if (res.code === 200 && res.data !== undefined) {
      // console.log(res)
      let data = res.data
      testWord.value = {}
      data.forEach(item => {
        testWord.value[item.name] = item.chinese
      })
      testCount.value = res.data.length
      // console.log(myWords)
    }
  })
}
const testResult = (result) => {
  console.log('测试完成:', result)
  // { correct: 25, total: 30, accuracy: "83.3" }
}

</script>

